<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <title>我的第一个Three.js案例</title>
    <style>
        body {
            margin: 0;
        }

        canvas {
            width: 100%;
            height: 100%;
            display: block;
        }
    </style>
</head>
<body onload="init()">
<script src="https://cdn.bootcss.com/three.js/92/three.js"></script>
<!--dat.GUI 实现页面调试-->
<script src="https://cdn.bootcss.com/dat-gui/0.7.1/dat.gui.min.js"></script>
<script>
    //声明一些全局变量
    var renderer, camera, scene, geometry, material, mesh;
    controls = {
    positionX:0,
    positionY:0,
    positionZ:0
	};

    //初始化渲染器
    function initRenderer() {
        renderer = new THREE.WebGLRenderer(); //实例化渲染器
        renderer.setSize(window.innerWidth, window.innerHeight); //设置宽和高
        document.body.appendChild(renderer.domElement); //添加到dom
    }

    //初始化场景
    function initScene() {
        scene = new THREE.Scene(); //实例化场景
    }

    //初始化相机
    function initCamera() {
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200); //实例化相机
        camera.position.set(0, 0, 15);
    }

    //创建模型
    function initMesh() {
        geometry = new THREE.BoxGeometry( 2, 2, 2 ); //创建几何体
        material = new THREE.MeshNormalMaterial(); //创建材质

        mesh = new THREE.Mesh( geometry, material ); //创建网格
        mesh.visible=true;
        mesh.name="mesh1";
        scene.add( mesh ); //将网格添加到场景

        geometry2 = new THREE.BoxGeometry( 2, 2, 2 ); //创建几何体
        material2 = new THREE.MeshNormalMaterial(); //创建材质

        mesh2 = new THREE.Mesh( geometry, material ); //创建网格
        mesh2.visible=true;
        mesh2.name="mesh2";
        scene.add( mesh2 ); //将网格添加到场景
    }

    //运行动画
    function animate() {
        requestAnimationFrame(animate); //循环调用函数

        mesh.rotation.x += 0.01; //每帧网格模型的沿x轴旋转0.01弧度
        mesh.rotation.y += 0.02; //每帧网格模型的沿y轴旋转0.02弧度

        mesh2.rotation.x -= 0.01; //每帧网格模型的沿x轴旋转0.01弧度
        mesh2.rotation.y -= 0.02; //每帧网格模型的沿y轴旋转0.02弧度

        renderer.render( scene, camera ); //渲染界面
    }

    //初始化函数，页面加载完成是调用
    function init() {
        initRenderer();
        initScene();
        initCamera();
        initMesh();

        animate();//运行动画
        

    }
    window.setTimeout(function(){
    	// scene.remove(mesh);3秒后移除
    	var curmesh = scene.getObjectByName("mesh1");
    	//console.log(curmesh);

    	// curmesh.visible=false;//隐藏网格

    	// 遍历3D对象
        /*scene.traverse(function(child){
        	console.log(child);
        });*/
        //获取对象父元素，每个对象都有
        // console.log(mesh.parent === scene);

        // 修改 3D 对象的位置，大小和转向
        // 修改位置方法1
        mesh.position.x = 3;//将模型的位置调整到x正轴距离原点为3的位置。
        mesh.position.y += 5; //将模型的y轴位置以当前的位置向上移动5个单位。
        mesh.position.z -= 6;//将模型的z轴往后退
		// 修改位置方法2
        // mesh2.position.set(-1,0,3);//直接将模型的位置设置在x轴为1，y轴为2，z轴为3的位置
		// 修改位置方法2
        // mesh2.position = new THREE.Vector3(-1,0,3);//无效

        // 修改大小的方式(原地放大)
        // 方式1
        /*mesh2.scale.x = 2;//模型沿x轴放大1倍
        mesh2.scale.y = 0.5; //模型沿y轴缩小一倍
        mesh2.scale.z = 1; //模型沿z轴保持不变*/
        // 方式2
        /*mesh2.scale.set(2,2,2);
        mesh2.scale.set(0.5, 0.5, 0.5); //每个方向等比缩小一倍*/

        // 修改模型的转向
        /*mesh2.rotation.x=Math.PI;//模型沿x旋转180度
		mesh2.rotation.y = Math.PI ; //模型沿y轴旋转360度，跟没旋转一样的效果。。。
		mesh2.rotation.z = - Math.PI / 2; //模型沿z轴逆时针旋转90度
		mesh2.rotation.set(Math.PI, 0, - Math.PI / 2, "YZX"); //先沿y轴旋转180度，再沿z轴旋转0度，最后沿x轴逆时针旋转90度*/
		// mesh2.rotation = new THREE.Euler(Math.PI, 0, - Math.PI / 2, "YZX"); //无效果

		//dat.GUI 实现页面调试
		gui = new dat.GUI();
		gui.add(controls, "positionX", -10, 10).onChange(updatePosition);
		gui.add(controls, "positionY", -10, 10).onChange(updatePosition);
		gui.add(controls, "positionZ", -10, 10).onChange(updatePosition);

		function updatePosition() {
		    mesh2.position.set(controls.positionX, controls.positionY, controls.positionZ);
		}
    },3000);
</script>
</body>
</html>